import {
  fetchOrgList,
  OrganizationApi,
} from '@/api/userCenter/authority/organization'
import { useStore } from '@/store'
import { computed, reactive } from 'vue'
import { OrgTableState } from '../types'

function useSearchOrg() {
  const store = useStore()
  const tableStateWrapper = reactive<OrgTableState>({
    selectedRowKeys: [],
    tableColumns: [
      {
        title: '组织名称',
        dataIndex: 'name',
      },
      {
        title: '负责人',
        dataIndex: 'managerName',
      },
      {
        title: '部门电话',
        dataIndex: 'phone',
      },
      {
        title: '组织层级',
        dataIndex: 'level',
      },
      {
        title: 'CODE',
        dataIndex: 'code',
      },
      {
        title: 'ID',
        dataIndex: 'id',
      },
      {
        title: '父级ID',
        dataIndex: 'pid',
      },
      {
        title: '操作',
        dataIndex: 'options',
        width: 50,
        slots: {
          customRender: 'options',
        },
      },
    ],
    tableSize: 'small',
    tableData: [],
  })

  const getOrgList = async () => {
    const { data } = await fetchOrgList()
    tableStateWrapper.tableData = data
  }
  const fetchOrgListLoading = computed(() =>
    store.getters['global/isOpLoading'](OrganizationApi.GET_ORGANIZATION_LIST)
  )

  return { tableStateWrapper, getOrgList, fetchOrgListLoading }
}

export default useSearchOrg
